<template>
  <div class="category_tag">
    <div class="editor_area">
        <div class="tag_area">
          <div class="select_tag">
            <div class="label_title">
              <span>文章标签:</span>
              <div class="add_list">
                <label v-for="(tag,index) in saveBlog.tagList">
                  {{ tag.tagName }}
                  <span @click="deleteById(index,1)">-</span>
                </label>
              </div>
              <label for="tagcontrol"> + 添加文章标签</label>
            </div>
          </div>
          <input type="checkbox" id="tagcontrol">
          <ul class="data_list">
             <div class="tag_count_info"><span>还可以添加 {{ tagCount }} 个标签</span></div>
             <li v-for="(tag,index) in allTagList" @click="addtag(tag)">{{ tag.tagName }}</li>
          </ul>
        </div>
        <div class="category_area">
          <div class="select_category">
            <div class="label_title">
              <span>分类标签:</span>
              <div class="add_list">
                <label v-if="categoryCount==0">
                  {{ saveBlog.category.categoryName }}
                  <span @click="deleteById(0,0)">-</span>
                </label>
              </div>
              <label for="categorycontrol">+ 添加分类标签</label>
            </div>
          </div>
          <input type="checkbox" id="categorycontrol">
          <ul class="data_list">
            <div class="tag_count_info"><span>只能添加 {{ categoryCount }} 个分类</span></div>
            <li v-for="(category,index) in allCategoryList" @click="addcategory(category)">{{ category.categoryName }}</li>
          </ul>
        </div>
    </div>
    <Loading v-show="isload"/>
    <div class="btn">
      <button v-if="!isupdate" @click="saveBlogInfo(1)">发布</button>
      <button v-if="isupdate" @click="updateSaveBlogIngo">修改</button>
      <button v-if="!isupdate" @click="saveBlogInfo(0)">存稿</button>
      <button @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
import Loading from "../../body/message/Loading";
import {request} from "../../../axios";

export default {
  name: "CategoryAndTag",
  props:{
    blog:null,
    isupdate:false,
  },
  components:{
    Loading
  },
  data(){
    return{
      isload:false,
      tagCount:3,
      categoryCount:1,
      allTagList:[],
      allCategoryList:[],
      saveBlog:{
        blogArticle: null,
        user:null,
        tagList:[],
        category: null,
      }
    }
  },
  methods:{
    saveBlogInfo(status){
      this.isload = true;
      if(status){
        this.saveBlog.blogArticle.articleStatus = 1;
      }
      console.log(this.saveBlog)
      request({
        url:'/backend/savebloginfo',
        method:"POST",
        data:{
          blog:this.saveBlog
        }
      }).then(res=>{
        this.isload = false;
        console.log(res)
      })
    },
    updateSaveBlogIngo(){
      this.isload = true;
      request({
        url:'/backend/updatebloginfo',
        method:"POST",
        data:{
          blog:this.saveBlog
        }
      }).then(res=>{
        this.isload = false;
        console.log(res)
      })
    },
    addtag(item){
      if(this.tagCount<=0){
        return;
      }
      this.tagCount--;
      this.saveBlog.tagList.push(item);
    },
    addcategory(item){
      if(this.categoryCount<=0){
        return;
      }
      this.categoryCount--;
      this.saveBlog.category = JSON.parse(JSON.stringify(item));
    },
    deleteById(idx,flag){
      if(flag){
        this.tagCount++;
        this.saveBlog.tagList.splice(idx,1);
      }else{
        this.categoryCount++;
        for (let key in this.saveBlog.category){
          this.saveBlog.category[key]='';
        }
      }
    },
    cancel(){
      this.$emit("cancel");
    },
    getAllTag(){
      this.isload = true;
      request({
        url:"/backend/getalltag",
        method:"GET",
      }).then(res=>{
        this.isload = false;
       this.allTagList=res.data.tagList;
        console.log( this.allTagList);
      })
    },
    getAllCategory(){
      this.isload = true;
      request({
        url:"/backend/getallcategory",
        method:"GET",
      }).then(res=>{
        this.isload = false;
        this.allCategoryList=res.data.categoryList;
        console.log( this.allCategoryList);
      })
    },
  },
  mounted() {
    this.saveBlog.blogArticle = this.blog;
    this.saveBlog.user = JSON.parse(this.$store.getters.getUser);
    if(this.saveBlog.user!=null){
      this.saveBlog.user.userPhoto='';
    }
    console.log(this.saveBlog.user );
    this.saveBlog.tagList = this.blog.tags;
    this.tagCount -= this.saveBlog.tagList.length;
    this.saveBlog.category = this.blog.category;
    if(this.saveBlog.category!=null){
      this.categoryCount--;
    }
    console.log("category: "+ this.saveBlog.category)
    this.getAllTag();
    this.getAllCategory();
  }
}
</script>

<style scoped>
.category_tag{
  position: absolute;
  width: 610px;
  height: 400px;
  margin: 0 auto;
  background-color: #dddddd;
  box-shadow: 0 0 5px #03e9f4;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 100;
}
.editor_area{
  width: 80%;
  margin: 6rem auto;
}
.tag_area,.category_area{
  position: relative;
  margin: 1rem 0;
}
.label_title span{
  display: inline-block;
  height: 30px;
  font-size: 1.2rem;
  padding: 0 5px;
  color: #ee9900;
}
.label_title label{
  font-size: 1rem;
  display: inline-block;
  background-color: #F7F7F7;
  border-radius: 5px;
  cursor: pointer;
}
.add_list{
  display: inline-block;
}
.add_list label{
  padding: 0 5px;
  margin-right: 5px;
  color: #1abc9c;
  text-shadow: 0 0 3px #03e9f4;
}
.add_list label span{
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0;
  margin-left: 5px;
}
.add_list label span:hover{
  border-radius: 10px;
  background-color: #1abc9c;

}

#tagcontrol,#categorycontrol{
  display: none;
}
#tagcontrol:checked +.data_list,
#categorycontrol:checked +.data_list{
  visibility: visible;
}
.data_list{
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #F7F7F7;
  width: 70%;
  margin: 0 auto;
  left: 91px;
  visibility: hidden;
  z-index: 100;
}
.data_list li{
  margin: .5rem;
  color: #000000;
  font-size: 14px;
  border-radius: 5px;
  padding: 0 3px;
  cursor: pointer;
  box-shadow: 0 0 5px #03e9f4;
}
.data_list li:hover{
  transform: scale(1.2);
}
.data_list li:nth-child(2n){
  background-color: #54BC4B;
}
.data_list li:nth-child(2n-1){
  background-color: #ffff00;
}
.tag_count_info{
  color: #c0c0c0;
  font-size: 14px;
  width: 100%;
}
.btn{
  position: absolute;
  width: 100%;
  bottom: 25px;
}
.btn button{
  float: right;
  margin: 0 5px;
  padding: 0 5px;
}



</style>